<template>
  <main>
    <div class="index-wrapper">
      <div class="goods-list">
        <div class="components-container" style="background: transparent; --vertical_margin: 16px; --transverse_margin: 0px;">
          <div class="container-body">
            <div class="body-container" style="--spacing: 16px; --goods-border-radius: 4px; --goods-image-style: contain; --lines: 0;">
              <div class="body-container-swiper"></div>
              <div class="body-container-grid">
                  <div v-for="(item,index) in noteList" :key="item.id" class="goods-item no-border-white" style="flex-direction: column; --title-align: left; --flex-align: flex-start;">
                      <div class="goods-item-img-container">
                        <div class="image-box" style="padding-top:56.25%;width:100%;">
                          <nuxt-link :to="'/note/detail/'+item.id" class="flex align-center" :title="item.title" :alt="item.title">
                            <img
                              v-lazy="item.img"
                              class="goods-img top-image">
                            <div class="type-label-box">
                              <div class="type-label">
                                {{item.categoryName}}
                              </div>
                            </div>
                            <div class="mook" v-if="item.percent > 0">
                              <div
                                  class="shadow"
                                  :style="`background: conic-gradient(#f74300 ${item.percent}%, gray ${item.percent}%)`"
                              ></div>
                              <div class="num">{{item.percent}}%</div>
                            </div>
                          </nuxt-link>
                        </div>
                      </div>
                      <div class="goods-card-container-info goods-card-container-vertical">
                        <div class="content-box">
                          <div class="title-box " style="font-weight:600;">
                            <nuxt-link :to="'/note/detail/'+item.noteId" class="two-line-hidden" :title="item.title" :alt="item.title">{{item.title}}</nuxt-link>
                          </div>
                          <div class="title-box ET5 EC14  MT- c9999">
                            <nuxt-link :to="'/note/detail/'+item.noteId" class="two-line-hidden" :title="item.title" :alt="item.title">{{item.description || "暂无"}}</nuxt-link>
                          </div>
                        </div>
                        <div class="social-btn-group mt5">
                          <nuxt-link :to="'/note/detail/'+item.id" class="flex align-center" :title="item.title" :alt="item.title">
                            <span class="classify" v-if="item.notetype==1">
                                  基础课
                                </span>
                                  <span class="classify" v-if="item.notetype==2">
                                  进阶课
                                </span>
                                  <span class="classify" v-if="item.notetype==3">
                                  实战课程
                                </span>
                                  <span class="classify" v-if="item.notetype==4">
                                  面试课
                            </span>
                            <span class="pr tp3 fz14 fb">
                              <span class="praise social-btn ml3">
                                <span class="iconfont icon-eye">
                                </span>
                                <span class="count">
                                  {{item.viewcount||0}}
                                </span>
                              </span>
                             <span class="like social-btn ml5">
                                <span class="iconfont icon-shoucang">
                                </span>
                                <span class="count">
                                  {{item.favNum||0}}
                                </span>
                              </span>
                            </span>
                          </nuxt-link>
                        </div>
                        <div class="temp-item-owner mt15 mb5 flex justify-content-between align-items">
                          <nuxt-link  class="flex align-items"  to="javascrit:void(0);">
                          <img v-lazy="item.avatar" :alt="item.username">
                                <span class="owner-name pr tp1">
                              {{item.username}}
                            </span>
                          </nuxt-link>
                          <div class="flex align-items" style="justify-content: flex-end;flex:1">
                            <nuxt-link  :to="'/course/play/'+item.courseId" v-if="item.courseId && false">
                              <n-button  size="small" class="ml-3 pr ftp2"  style="background:#f0a000;border-color:#f0a000;">
                                <i class="iconfont icon-qingdan1 cof mr5 pr ftp1"></i>
                                <span class="px-1 text-white">关联课程</span>
                              </n-button>
                            </nuxt-link>
                            <nuxt-link :to="'/special/detail/'+item.specialId" v-if="item.specialId">
                              <n-button  size="small" class="ml-3 pr ftp2"  style="background:#f74502;border-color:#f74502;">
                                <i class="iconfont icon-zhuanti cof mr5 pr ftp1"></i>
                                <span class="px-1 text-white">关联专栏</span>
                              </n-button>
                            </nuxt-link>
                          </div>
                        </div>
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-[60px] flex justify-center" style="width: 100%" v-if="total==0">
      <k-empty :show="total==0" url="/note" btnmsg="点击前往学习课程"></k-empty>
    </div>
    <div class="mt-6"  v-if="total > pageSize">
      <n-pagination v-model:page="pageNo"
                    v-model:page-size="pageSize"
                    :display-order="['pages', 'quick-jumper', 'size-picker']"
                    show-quick-jumper
                    show-size-picker
                    :item-count="total"
                    :page-sizes="pageSizesList"
                    :on-update:page="handleLoadPage"
                    :on-update:page-size="handleLoadPageSize"
      />
    </div>
    <k-loading :show="loadingFlag"></k-loading>
  </main>
</template>
<script setup>
const pageNo = ref(1)
const pageSize = ref(15)
const total = ref(0)
const pages = ref(0)
const noteList = ref([])
const loadingFlag = ref(false)
const emits = defineEmits(["success"])
// 分页显示的列表
const pageSizesList = ref([
  {
    label: '15 每页',
    value: 15
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 45
  }
])

// 加载用户发布的课程
const handleLoadNoteData = async () => {
  loadingFlag.value = true
  const resp = await useFindMyNotePageApi({
    "pageNo": pageNo.value,
    "pageSize": pageSize.value
  })
  noteList.value = resp.data.records
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
  emits("success",total.value)
}

// 点击分页执行的回调方法
const handleLoadPage = (pno) => {
  pageNo.value = pno
  handleLoadNoteData()
  document.documentElement.scrollTop = 0
}

// 点击分页size列表的回调方法
const handleLoadPageSize = (psize) => {
  pageNo.value = 1
  pageSize.value = psize
  handleLoadNoteData()
  document.documentElement.scrollTop = 0
}


onMounted(() => {
  // 加载用户发布的课程
  handleLoadNoteData()
})

</script>

<style scoped lang="scss">

.mook {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(119, 113, 102, 0.7);
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  z-index: 21;

  .shadow {
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: 50%;
    top: -28px;
    left: -28px;
    z-index: 21;
    mask: radial-gradient(transparent 44px, #000 45px);
    -webkit-mask: radial-gradient(transparent 44px, #000 45px);
    transform: scale(0.6);
  }

  .shadow::before {
    content: "";
    position: absolute;
    left: 48px;
    top: 0px;
    width: 5px;
    height: 5px;
    background: #ddff5c;
    border-radius: 50%;
    z-index: 21
  }

  .shadow::after {
    content: "";
    position: absolute;
    left: -1px;
    top: 44px;
    width: 8px;
    height: 8px;
    background: #85ea8e;
    border-radius: 50%;
    z-index: 21;
  }

  .num {
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
  }
}
</style>
